<template>
	<view class="container">
		<view class="member-box">
			<view class="title">
				<view class="title-left">家庭成员</view>
				<view class="title-right">(共{{memberList.length}}人)</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in memberList" :key="item.Id">
					<view class="img-box">
						<image class="img" src="../../static/img/2.png"></image>
					</view>
					<view class="item-name">姓名：{{item.RealName}}</view>
					<view class="item-relation">称谓：{{item.RelationName}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {myRequest} from '../../utils'
	
	export default {
		data() {
			return {
				loading: false,
				memberList: [],
				timer: null
			}
		},
		
		onShow() {
			
			let that = this
			if (that.loading) return
			that.loading = true
			
			uni.showLoading({
				title: '拼命加载中...',
				success() {
					
					if (that.timer != null) {
						clearTimeout(that.timer)
					}
					
					that.timer = setTimeout(function() {
						
						myRequest({
							url: '/api/user/family_member',
							data: {},
						}, function(res) {
							
							that.loading = false
							uni.hideLoading()
							
							if (res.statusCode != 200) {
								uni.showModal({
									title: '提示',
									content: '服务器错误，请求失败'
								})
								return
							}
							
							if (res.data.status != 0) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
								return
							}
							
							that.memberList = res.data.data
							
						})
						
					}, 1000)
					
				}
			})
			
		},
		
		methods: {
	
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
		height: auto;
		background-image: linear-gradient(#ffae00, #eee, #efefef);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 160rpx;
		min-height: 1800rpx;
	}
	
	.member-box {
		width: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.title {
		width: 100%;
		display: flex;
		padding-left: 70rpx;
	}
	
	.title-left {
		font-size: 50rpx;
	}
	
	.title-right {
		font-size: 32rpx;
		margin-left: 20rpx;
		margin-top: 12rpx;
	}
	
	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 176rpx;
		height: 248rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		margin-top: 70rpx;
		position: relative;
		font-size: 26rpx;
	}
	
	.img-box {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
		background-color: #ffffff;
		position: absolute;
		top: -40rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 8rpx solid #ffffff;
	}
	
	.img {
		width: 112rpx;
		height: 112rpx;
	}
	
	.item-name {
		padding-left: 16rpx;
		width: 100%;
		margin-top: 136rpx;
	}
	
	.item-relation {
		padding-left: 16rpx;
		width: 100%;
	}
</style>
